<template>
  <el-dialog
    title="散货历史记录"
    :close-on-click-modal="false"
    width="840px"
    @open="handleOpen"
    @close="handleClose"
    :visible.sync="visible">

    <el-table
      :key="tableKey"
      :data="tableData"
      v-loading="loading"
      element-loading-text="正在加载..."
      style="width: 100%;">

      <el-table-column label="港口" property="portCode" width="120">
        <template slot-scope="scope">
          {{scope.row.portCode | portCodeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="提单号" property="blNo" width="130"></el-table-column>
      <el-table-column label="进出口类型" property="ieFlag">
        <template slot-scope="scope">
          {{scope.row.ieFlag | ieFlagFilter}}
        </template>
      </el-table-column>
      <el-table-column label="仓位" property="yardCode"></el-table-column>
      <el-table-column label="货物名称" property="cargoName"></el-table-column>
      <el-table-column label="作业类型" property="actType" width="120">
        <template slot-scope="scope">
          {{scope.row.actType | bulkTypeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="作业时间" property="actTimeDesc" width="130"></el-table-column>
      <el-table-column label="操作" width="50">
        <template slot-scope="scope">
          <a
            @click="view({id:scope.row.id, beginTime:scope.row.actTimeDesc, endTime:scope.row.actTimeDesc})">明细</a>
        </template>
      </el-table-column>
    </el-table>

    <div class="clearfix">
      <div class="pagination-container fl">
        <el-radio-group v-model="dataForm.dataType" @change="handleChange">
          <el-radio-button label="1">一年</el-radio-button>
          <el-radio-button label="0">全部</el-radio-button>
        </el-radio-group>
      </div>
      <div class="pagination-container align-right fr" v-show="tableData.length > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="dataForm.pageNum"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <el-dialog
      width="740px"
      title="明细"
      :visible.sync="innerVisible"
      append-to-body>
      <el-scrollbar :native="false" wrap-class="scroll-list">
        <div class="app-container" style="overflow-y: hidden">
          <div class="block">
            <el-row :gutter="32">
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">提单号</div>
                <div class="detail">{{result.blNo}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">船舶编号</div>
                <div class="detail">{{result.vesselNo}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">航次号</div>
                <div class="detail">{{result.voyageNo}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">进出口类型</div>
                <div class="detail">{{result.ieFlag | ieFlagFilter}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">作业类型</div>
                <div class="detail">{{result.actType | bulkTypeFilter}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">作业时间</div>
                <div class="detail">{{result.actTimeDesc}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">仓位</div>
                <div class="detail">{{result.yardCode}}</div>
              </el-col>
            </el-row>
            <divider></divider>
          </div>
          <div class="block">
            <el-row :gutter="32">
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">发货人</div>
                <div class="detail">{{result.shipper}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">收货人</div>
                <div class="detail">{{result.consignee}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">货物名称</div>
                <div class="detail">{{result.cargoName}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">重量</div>
                <div class="detail">{{result.weight}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">体积</div>
                <div class="detail">{{result.volume}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">件数</div>
                <div class="detail">{{result.packNum}}</div>
              </el-col>
              <el-col :sm="12" :md="12" class="base-detail">
                <div class="term">包装类型</div>
                <div class="detail">{{result.packType | bulkPackingFilter}}</div>
              </el-col>
            </el-row>
            <divider></divider>
          </div>
        </div>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </el-dialog>
</template>

<script>
  // api
  import { fetchList, fetchDetail } from '@/api/portBulk'
  // utils
  import { getLately } from '@/utils'
  // vuex
  import { mapGetters } from 'vuex'
  // components
  import Divider from '@/components/Divider'

  const time = getLately(365)

  export default {
    name: 'historical-records',
    data() {
      return {
        tableKey: 0,
        tableData: [],
        loading: false,
        dataForm: {
          dataType: '1',
          id: '',
          blNo: '',
          beginTime: time[0],
          endTime: time[1],
          pageNum: 1,
          pageSize: 5
        },
        total: 0,
        result: {},
        visible: false,
        innerVisible: false
      }
    },
    computed: {
      ...mapGetters([
        'currentId'
      ])
    },
    methods: {
      init() {
        this.visible = true
        this.dataForm.blNo = this.currentId
      },
      handleOpen() {
        this._fetchList()
      },
      handleClose() {
        this.dataForm.dataType = '1'
      },
      _fetchList() {
        this.loading = true
        this.tableData = []
        fetchList(this.dataForm).then((res) => {
          this.tableData = res.data.data.dataList
          this.total = res.data.data.total
          this.loading = false
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.dataForm.pageSize = val
        this._fetchList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.dataForm.pageNum = val
        this._fetchList()
      },
      view({ id, beginTime, endTime }) {
        fetchDetail({ id, beginTime, endTime }).then((res) => {
          this.result = res.data.data
          this.innerVisible = true
        })
      },
      handleChange(val) {
        this.dataForm.pageNum = 1
        if (val === '1') {
          this.dataForm.beginTime = time[0]
          this.dataForm.endTime = time[1]
          this._fetchList()
        } else {
          this.dataForm.beginTime = ''
          this.dataForm.endTime = ''
          this._fetchList()
        }
      }
    },
    components: {
      Divider
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">

</style>
